<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      height: 100%;
    }
    html {
      background: url("./2.gif") no-repeat;
      background-size: 100% 100%;
      height: 100%;
    }
    .box {
      width: 60px;
      height: 60px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(243, 72, 72, 0.7);
      border-radius: 50%;
    }
    .head {
      background-color: rgba(5, 216, 33, 0.7);
    }
    .snake {
      display: none;
    }
    .start {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: block;
    }
    .start button {
      width: 200px;
      height: 60px;
      font-size: 20px;
      background-color: rgba(235, 10, 10, 0.7);
      outline: none;
      border: none;
      color: white;
      animation: move 1s linear infinite;
      border-radius: 10px;
      animation-direction: alternate;
    }
    .diffcuty {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: none;
    }
    .diffcuty button {
      border-radius: 10px;
      display: block;
      width: 200px;
      height: 60px;
      font-size: 20px;
      background-color: rgba(235, 10, 10, 0.7);
      animation: move 1s linear infinite;
      animation-direction: alternate;
      outline: none;
      border: none;
      color: white;
      margin: 10px 0;
    }
    #food {
      display: none;
      width: 60px;
      height: 60px;
      position: absolute;
      background-color: rgba(51, 128, 230, 0.7);
      border-radius: 50%;
    }
    .img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      height: 500px;
      opacity: 0;
      transition: all 0.5s;
      z-index: -1;
    }
    .img img {
      width: 100%;
      height: 100%;
    }
    @keyframes move {
      0% {
        transform: translateY(0%);
      }
      100% {
        transform: translateY(10%);
      }
    }
  </style>
  <body>
    <div class="content">
      <!-- 开始游戏 -->
      <div class="start">
        <button id="btnStartGame">开始游戏</button>
      </div>
      <!-- 选择难度 -->
      <div class="diffcuty">
        <button id="primary">初级</button>
        <button id="middle">中级</button>
        <button id="advanced">高级</button>
      </div>
      <!-- 蛇 -->
      <div class="snake">
        <div class="head box"></div>
      </div>
      <!-- 食物 -->
      <div id="food"></div>
      <!-- 展示图片 -->
      <div class="img">
        <img src="./image/food.jpg" alt="" />
      </div>
    </div>
    <script>
      var boxs = document.querySelectorAll(".box");
      var snake = document.querySelector(".snake");
      var snake_x = 0;
      var snake_y = 0;
      var direction = "right";
      // 边界距离
      var snake_move_max_x = document.querySelector("html").clientWidth;
      var snake_move_max_y = document.querySelector("html").clientHeight;
      // 开始游戏按钮
      var btnStartGame = document.getElementById("btnStartGame");
      var timer = null;
      var diffcuty = document.querySelector(".diffcuty");
      var btns = diffcuty.querySelectorAll("button");
      var snakeSize = boxs[0].clientWidth;
      var time = -1;
      var food = document.querySelector("#food");
      var img = document.querySelector(".img");
      var imgInfo = img.querySelector("img");
      console.log(imgInfo);

      // 随机生成食物
      food.style.left =
        Math.floor(Math.random() * (snake_move_max_x - 120 - 120 + 1)) +
        120 +
        "px";
      food.style.top =
        Math.floor(Math.random() * (snake_move_max_y - 120 - 120 + 1)) +
        120 +
        "px";
      // 点击开始游戏;
      btnStartGame.onclick = choseGameDiffity;
      // 进入难度选择界面
      function choseGameDiffity() {
        btnStartGame.style.display = "none";
        diffcuty.style.display = "block";
        for (var i = 0; i < btns.length; i++) {
          btns[i].onclick = function () {
            diffcuty.style.display = "none";
            var id = this.id;
            switch (id) {
              case "primary":
                time = 180;
                break;
              case "middle":
                time = 150;
                break;
              case "advanced":
                time = 80;
                break;
            }
            startGame();
          };
        }
      }
      // 开始游戏
      function startGame() {
        clearInterval(timer);
        snake.style.display = "block";
        btnStartGame.style.display = "none";
        food.style.display = "block";
        timer = setInterval(() => {
          snakeMove();
        }, time);
      }

      // // 控制蛇上下左右
      function snakeMove() {
        switch (direction) {
          case "left":
            snake_x -= 60;
            break;
          case "top":
            snake_y -= 60;
            break;
          case "right":
            snake_x += 60;
            break;
          case "bottom":
            snake_y += 60;
            break;
        }
        // 尾随头部移动
        for (var i = boxs.length - 1; i > 0; i--) {
          boxs[i].style.left = boxs[i - 1].offsetLeft + "px";
          boxs[i].style.top = boxs[i - 1].offsetTop + "px";
        }
        boxs[0].style.left = snake_x + "px";
        boxs[0].style.top = snake_y + "px";
        if (
          snake_x > snake_move_max_x ||
          snake_x < 0 ||
          snake_y > snake_move_max_y ||
          snake_y < 0
        ) {
          window.location.reload();
        }

        // 触发撞击事件
        var fl = food.offsetLeft;
        var ft = food.offsetTop;
        if (Math.abs(snake_x - fl) <= 40 && Math.abs(snake_y - ft) <= 40) {
          var div = document.createElement("div");
          div.className = "box";
          snake.appendChild(div);
          console.log(snake.children);
          boxs = document.querySelectorAll(".box");
          for (var i = boxs.length - 1; i > 0; i--) {
            boxs[i].style.left = boxs[i - 1].offsetLeft + "px";
            boxs[i].style.top = boxs[i - 1].offsetTop + "px";
          }
          boxs[0].style.left = snake_x + "px";
          boxs[0].style.top = snake_y + "px";
          var length = boxs.length;
          switch (length) {
            case 5:
              img.style.opacity = 1;
              setTimeout(() => {
                img.style.opacity = 0;
              }, 3000);
              break;
            case 8:
              imgInfo.src = "./image/ae2740b2ffa869647435a3e132cb0dab.gif";
              img.style.opacity = 1;
              setTimeout(() => {
                img.style.opacity = 0;
              }, 3000);
              break;
            case 11:
              imgInfo.src = "./image/706c48039a15fecf20ecd3502b911df3.gif";
              img.style.opacity = 1;
              setTimeout(() => {
                img.style.opacity = 0;
              }, 3000);
              break;
            case 14:
              imgInfo.src = "./image/d48b445e7aea7e1b79f27ea096bbb27c.jpg";
              img.style.opacity = 1;
              setTimeout(() => {
                img.style.opacity = 0;
              }, 3000);
              break;
            case 18:
              imgInfo.src = "./image/a72161d9f2193f6347cdb02d44305de1.jpg";
              img.style.opacity = 1;
              setTimeout(() => {
                img.style.opacity = 0;
              }, 3000);
              break;
            case 25:
              imgInfo.src = "./image/92a74eb4eff907f1cbbb1b122ec9dbb7.png";
              img.style.opacity = 1;
              setTimeout(() => {
                img.style.opacity = 0;
              }, 3000);
              break;
          }
          food.style.left =
            Math.floor(Math.random() * (snake_move_max_x - 120 - 120 + 1)) +
            120 +
            "px";
          food.style.top =
            Math.floor(Math.random() * (snake_move_max_y - 120 - 120 + 1)) +
            120 +
            "px";
        }
      }

      // // 鉴别上下左右键位
      document.onkeyup = function (e) {
        var currentCode = e.keyCode;
        switch (currentCode) {
          case 37:
            direction = "left";
            break;

          case 38:
            direction = "top";

            break;
          case 39:
            direction = "right";

            break;
          case 40:
            direction = "bottom";

            break;
        }
      };
    </script>
  </body>
</html>
